<template>
    <h1>Hello</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>性别：{{ person.gender }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">显示电话</button>
</template>

<script setup lang="ts" name="Person001">
    import { ref, reactive, computed } from 'vue'
    let p = {
        name:'张三',
        gender:'男',
        age:20,
        tel:1888888888
    }
    // OK
    // let person = reactive(p)
    let person = ref(p)
    
    function changeName() {
        person.value.name = '李四'
    }
    function changeAge() {
        person.value.age += 1;
    }
    function showTel() {
        alert(person.value.tel)
    }
        
</script>

